<template>
  <div id="tabcontrol">
    <div
      v-for="(item, index) in titles"
      :key="index"
      class="tabcontrol_item"
      :class="index === active ? 'isactive' : ''"
      @click="btn(index)"
    >
      <span @click="btnclick(index)">{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "tabcontrol", // 组件参数 接收来自父组件的数据
  props: {
    titles: {
      type: Array,
      default() {
        return [];
      },
    },
  }, // 局部注册的组件
  components: {}, // 组件状态值
  data() {
    return {
      active: 0, // 当前被选中的span
    };
  },
  methods: {
    btn(index) {
      this.active = index;
    },
    btnclick(index) {
      this.$emit("itemclick", index);
    },
  },
};
</script>
<style scoped>
#tabcontrol {
  display: flex;
  line-height: 40px;
  height: 40px;
  font-size: 15px;
  text-align: center;
  background-color: #fff;
}
.tabcontrol_item {
  flex: 1;
}

.isactive {
  color: palevioletred;
}

.isactive span {
  border-bottom: 3px solid palevioletred;
  padding: 0 5px 5px;
}
</style>